@charset "utf-8";
@import "reset";

@function r($px) {
    @return $px/100px * 1rem;
}

body{
    position: relative;
    
.web {
    padding-top: r(89px);
    header {
        z-index: 800;
        height: r(89px);
        background-color: #b20000;
        display: flex;
        justify-content: space-between;
        color: white;
        align-items: center;
        padding: 0 r(16px);
        position: fixed;
        width: 100%;
        top: 0;
        >img {
            width: r(264px);
        }
        a{
            color: #FFFFFF;
        }
    }
    .main {
        background-color: #f5f5f5;
        .new{
            font-size: 0;
            position: relative;
        }
        .new img {
            width: 100%;
            }
            bottom: 0;
        .kzkz{
            width: r(640px);
            height: r(104px);
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            top: r(255px);
            padding: r(24px) r(30px) 0 r(21px);
                h3{
                    font-size: 13px;
                    color: #FFFFFF;
                }
                .mz{
                    display: flex;
                    justify-content: space-between;
                   .kz{
                    display: flex;
                    justify-content: space-between;
                    padding-top: r(12px);
                    width: r(160px);
                    i{
                        font-size: 9px;
                        color: #FFFFFF;
                        padding-right: r(6px);
                        }
                    } 
                .mj{
                    padding-top: r(12px);
                    display: flex;
                    justify-content: flex-end;
                     p{
                        font-size: 10px;
                        color: #FFFFFF;
                        padding-right: r(8px);
                    }
                    span{
                        font-size: 8.5px;
                        color: #FFFFFF;
                    }
                   }
                   
                
                }
                
        }
         

        
        .newPage {
            background-color: #FFFFFF;
            padding: r(30px);
            font-size: 0;
            margin-bottom: r(25px);
            i{
                font-size: 8px;
            }
            li {
                display: flex;
                justify-content: space-between;
                .newP-left {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    h3{
                        font-size: 13px;
                        a{
                            color: #1D1D1D;
                        }
                    }
                    >div {
                        display: flex;
                        justify-content: space-between;
                        color: #cacaca;
                        i{
                            padding-right: r(7px);
                        }
                        span{
                            font-size: 10px;
                            line-height: r(20px);
                        }
                    }
                }
            }
            .newP-right {
                width: r(208px);
                img {
                    width: 100%;
                }
            }
            hr {
                height: r(2px);
                margin: r(17px) 0;
                border: none;
                background-color: #e4e4e4;
            }
        }
        .fow{
            padding: r(35px) r(29px) r(30px);
            background-color: #FFFFFF;
            img{
                width: 20%;
            }
            ul{ 
              
               h3{ 
                   font-size: 12.5px;
                   margin-bottom: r(18px);
                    a{
                        color: #1D1D1D;
                        }
               }
               span{
                   font-size: 10px;
                   padding-left: r(10px);
               }
               .mil{
                   padding-top: r(5px);
                   font-size: 10px;
               }
                li:first-child{
                    >div {
                        display: flex;
                        justify-content: space-between;
                        color: #c5c5c5;
                        img{
                            width: 32%;
                        }
                    }
                    >div:nth-of-type(2){
                        >div{
                            i{
                                font-size: 8px;
                            }
                            img{
                                width: 11%;
                            }
                        }
                    }
                }
            }
        }
        .newp {
            background-color: white;
            padding:0 r(30px);
            font-size: 0;
            li {
                display: flex;
                justify-content: space-between;
                .newP-left {
                    width: r(325px);
                    h3{
                        font-size: 13px;
                    }
                    span{
                        font-size: 10px;
                    }
                    i{
                        padding-right: r(4px);
                        font-size: 9px;
                    }
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    >div {
                        display: flex;
                        justify-content: space-between;
                        color: #cacaca;
                    }
                }
            }
            .newP-right {
                width: r(208px);
                img {
                    width: 100%;
                }
            }
            hr {
                height: r(2px);
                margin: r(17px) 0;
                border: none;
                background-color: #e4e4e4;
            }
        }
        .newpa {
            background-color: white;
            padding:0 r(30px) r(32px) r(30px);
            font-size: 0;
            border-bottom: 2px solid #e4e4e4;
            li {
                display: flex;
                justify-content: space-between;
                .newP-left {
                    width: r(325px);
                    h3{
                        font-size: 13px;
                    }
                    span{
                        font-size: 10px;
                    }
                    i{
                        padding-right: r(4px);
                        font-size: 9px;
                    }
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    >div {
                        display: flex;
                        justify-content: space-between;
                        color: #cacaca;
                    }
                }
            }
            .newP-right {
                width: r(208px);
                img {
                    width: 100%;
                }
            }
            hr {
                height: r(1px);
                margin: r(17px) 0;
                border: none;
                background-color: #e4e4e4;
            }
        }
    .newpag{
        text-align: center;
        padding: r(22px) 0 r(19px) 0;
        font-size: 12px;
        color: #cacaca;
        background-color: #FFFFFF;
        margin-bottom: 68px;
        a{
            color: #cacaca;
        }
    }
    
   footer{
            text-align: center;
            border-top: 1px solid #bbb9ba;
            padding-top: r(11px);
            position: fixed;
            width: 100%;
            bottom: 0;
            background-color: #f5f5f5;
            ul{ 
                display: flex;
                justify-content: space-between;
                li{
                    width: 20%;
                    font-size: 0;
                    img{
                        width: 40%;
                        margin: 0 auto;
                    }
                    p{
                      font-size: 9px;
                      a{
                          color: #b0b0b0;
                      }
                    }
                }
                span{
                    font-size: 20px;
                    color: #e8e8e8;
                    text-align: center;
                    padding-top: r(10px);                    
                }
                .imx{
                    img{
                        padding-top: r(5px);
                        padding-bottom: r(7px);
                    }
                }
                .miao{
                    img{
                        padding-top: r(8px);
                        padding-bottom: r(5px);
                    }
                }
                .mis{
                    img{
                        width: 35%;
                        padding-bottom: r(7px);
                    }
                }
                .hif{
                    img{
                        width: 35%;
                        padding-bottom: r(5px);
                    }
                }
                .miy{
                    img{
                        width: 50%;
                        padding-top: r(8px);
                        padding-bottom: r(5px);
                    }
                }
           }    
        }    
  } 
.sen{
      z-index: 888;
      width: 100%;
      height: 100%;
      background-color: #f1f1f1;
      position: absolute;
      position: fixed;
      top: 0;
      left: -100%;
      transition:all 1s;
      overflow: scroll;
       header{
        margin: 0 auto;
        width: r(640px);
        height: r(87px);
        background-color: #1e1e1e;
        display: flex;
        justify-content: space-between;
        position: relative;
        border-bottom: 1px solid #484848;
        padding-left: r(12px);
        .max{
            height: 44px;
            position: relative;
            
        i{
            color: #FFFFFF;
            position: absolute;
            left: 15px;
            top: 14px;
            z-index: 2;
        }
        input{
            width: r(530px);
            height: 26px;
            font-size: 11px;
            background-color: #1E1E1E;
            border-radius: 50px;
            border: 1px solid #d2d2d2;
            padding-left: 40px;
            margin: r(20px) r(10px) r(10px) r(10px);
            color: #7e7e7e;
            position: absolute; 
            }
            
        }
         .tou{
            line-height: r(87px);
            padding-right: r(4px);
            p{
                font-size: 13px;
                color: #FFFFFF;
            }
        }
    }
    .search{
        background-color: #f1f1f1;
        padding: 0 r(30px) 0 r(30px);
                
        h3{ 
            padding: r(32px) 0 r(16px) 0;
            font-size: 13.5px;
        }
        .searc{
            display: flex;
            justify-content: flex-start;
            .sear{
                width: r(151px);
                height: r(55px);
                border: 1px solid #e4e4e4;
                background-color: #FFFFFF;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
             .sea{
                width: r(176px);
                height: r(55px);
                border: 1px solid #e4e4e4;
                margin: 0 r(8px) 0 r(8px);
                background-color: #FFFFFF;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                        color: #8b8b8b;
                }
            }
            .ser{
                width: r(200px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
        }    
            .ham{
                display: flex;
                justify-content: flex-start;
                padding-top: r(10px);
                .mar{
                width: r(117px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                p{
                    letter-spacing: r(1px);
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
            .you{
                width: r(150px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                margin: 0 r(8px) 0 r(8px);
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
             .wau{
                width: r(288px);
                height: r(55px);
                background-color: #FFFFFF;
                border: 1px solid #e4e4e4;
                p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
            }
        }    
        .gam{
                display: flex;
                justify-content: flex-start;
                padding-top: r(11px);
                .gan{
                    width: r(92px);
                    height: r(55px);
                    background-color: #FFFFFF;
                    border: 1px solid #e4e4e4;
                    margin-right: r(7px);
                    p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
                }
                .eam{
                    width: r(250px);
                    height: r(55px);
                    background-color: #FFFFFF;
                    border: 1px solid #e4e4e4;
                    margin-right: r(7px);
                    p{
                    font-size: 14.5px;
                    text-align: center;
                    line-height: r(55px);
                    color: #8b8b8b;
                }
                }
                
                
            }
    }
  }
  
    .mal{
      z-index: 888;
      width: 100%;
      height: 100%; 
      background-color: #1e1e1e;
      position: absolute;
      position: fixed;
      overflow: scroll;
      top: 0;
      right: -100%;
      transition:all 1s;
      header{
        width: r(640px);
        height: r(89px);
        background-color: #1e1e1e;
        display: flex;
        justify-content: flex-start;
        position: relative;
        border-bottom: 1px solid #484848;
        .web2{
            width: r(52px);
            height: r(52px);
            background-color: #b60005;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            margin: r(20px) r(77px) r(17px) 0;
        p{
            text-align: center;
            font-size: 14px;
            color: #FFFFFF;
            margin-top: r(6px);
        }
        }
        .max{
            height: 44px;
            position: relative;
            
        i{
            color: #FFFFFF;
            position: absolute;
            left: r(18px);
            top: r(25px);
            z-index: 2;
        }
        input{
            width: r(480px);
            height: r(54px);
            font-size: 12px;
            background-color: #1E1E1E;
            border-radius: 50px;
            border: 1px solid #d2d2d2;
            padding-left: 40px;
            margin: r(17px) r(19px) r(13px) 0;
            color: #7e7e7e;
            position: absolute; 
            }
            
        }
    }
    .main{
        background-color: #1e1e1e;
         width: r(640px);
        .mia{
            margin: r(116px) 0 r(27px) 0;
            text-align: center;
            font-size: 0;
            img{
                width: 50%;
            }
        }
        .miz{
             margin-bottom: r(70px);
            h3{
                font-size: r(28px);
                color: #fefdfb;
                text-align: center;
                a{
                    color: #FFFFFF;
                }
            }
        
            p{
                text-align: center;
                padding-top: r(13px);
                font-size: r(22px);
                color: #454545;
                a{
                    color: #454545;
                }
            }
        }
        .box {
                width: r(640px);
                height: r(643px);
                background: #222222;
                border-top: r(23px) solid #303030;
            }
            
            .box ul {
                width: 100%;
                margin: 0;
                padding: 0;
            }
            
            .box li {
                list-style: none outside none;
                display: block;
                margin: 0;
                padding: 0;
                height: r(100px);
                width: 100%;
                overflow: hidden;
                background: #222222;
                transition-delay: 0.5s;
            }

            .box h3 {
                font-size: r(26px);
                margin: 0;
                height: r(80px);
                color: #FFFFFF;
                background: #222222;
                cusor: pointer;
                position:relative;
                padding-left: r(34px);
                border-bottom: 1px solid #454545;
                padding-top: r(10px);
            }
            span{
                margin-left: r(480px);
                margin-right: r(20px);
            } 
            .bom{
                 position: absolute;
                 right: 5.3%;   
            }
            .box li:hover {
                height: r(200px);
            }
            
            .box li:hover h3 {
                color: #FFFFFF;
                background: #222222;
            }
            
            .box div {
                margin: 0;
                color: #FFFFFF;
                font-size: r(26px);
                z-index: 2;
                padding-left: r(34px);
                padding-top: r(20px);                
            }
            .box li h3 span{
                transition: all 0.3s;
                 display: inline-block;
            }
            .box li:hover h3 span{
                transform: rotateZ(90deg);
            }
    }
    }
}
}
